<template>
  <div class="ticketCouplets">
    <div class="ticket-save">
      <img v-if="img" :src="img" alt="">
    </div>
    <div class="ticket-show" ref="poster">
      <!-- <img class="ticketCouplets" src="@/assets/images/ticketCouplets.jpg" alt=""> -->
      <div class="qrcode">
        <img src="@/assets/images/qrcode.jpg" alt="">
        <p>关注我们 开始报名</p>
        <p>长按图片保存并分享</p>
      </div>
    </div>
  </div>
</template>
<script>
  import html2canvas from 'html2canvas'

  export default {
    data() {
      return {
        img: '',
        timer: ''
      }
    },
    mounted() {
      this.createImg()
    },
    methods: {
      createImg() {
        this.$nextTick(() => {
          this.timer = setTimeout(() => {
            html2canvas(this.$refs.poster, {
              userCORS: true,
              allowTaint: true
            }).then((canvas) => {
              const _url = canvas.toDataURL()
              this.img = _url
            })
          }, 1200)
        })
      }
    },
    beforeDestroy() {
      clearInterval(this.timer)
    }
  };
</script>
<style scoped>
  .ticketCouplets {
    position: relative;
    width: 7.5rem;
    height: 13.34rem;
  }
  @media screen and (max-width: 320px) {
    .ticketCouplets .qrcode {
      bottom: .5rem;
    }
  }
  @media screen and (max-width: 375px) {
    .ticketCouplets {
      height: 100vh;
    }
  }

  .ticket-show {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background: #d60700; */
    z-index: 2;
    background-image:url('~@/assets/images/ticketCouplets.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .ticket-save {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
    opacity: 0;
  }

  .ticketCouplets .qrcode {
    width: 2.4rem;
    text-align: center;
    position: absolute;
    left: 2.55rem;
    bottom: 1rem;
  }

  .ticketCouplets .qrcode img {
    width: 1.8rem;
    height: 1.8rem;
  }

  .ticketCouplets .qrcode p {
    color: #fff;
    font-size: .2rem;
    line-height: .2rem;
    margin-top: .1rem;
    text-align: center;
  }
</style>
